<template>
    <div >
        <div class="title">
            <van-nav-bar
                    :fixed="fixed"
                    title="重置支付密码"
                    left-text="返回"
                    left-arrow
                    @click-left="onClickLeft"
            />
        </div>
        <div :style="{marginTop:'96px'}">
            <form @submit.prevent="showData">
                <van-cell-group>
                    <van-field
                            v-model="reset.phone"
                            label="手机号"
                            placeholder="请输入手机号"
                    />
                    <van-field
                            v-model="reset.sms"
                            center
                            clearable
                            label="验证码"
                            placeholder="请输入短信验证码"
                    >
                        <van-button slot="button" size="small" type="primary">发送验证码</van-button>
                    </van-field>
                    <van-field
                            v-model="reset.password"
                            type="password"
                            label="新密码"
                            placeholder="请输入密码"
                    />
                </van-cell-group>
                <div :style="{padding:'10px',marginTop:'50px'}">
                    <van-button size="large">确定</van-button>
                </div>
            </form>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                fixed:true,
                reset:{}
            }
        },
        methods:{
            onClickLeft(){
              this.$router.back()
            },
            getAgain(){
                this.show = false
                this.getcode()
            },
            getcode(){//验证码倒计时
                const time = 60;
                this.show = false
                if (!this.timer){
                    this.count = time;
                    this.time = setInterval(()=>{
                        if (this.count>0 && this.count<=time) {
                            this.count--;
                        }else{
                            this.show = true
                            clearInterval(this.timer);
                            this.timer = null;
                        }
                    },1000)
                }
            },
            showData() {//验证手机号码
                const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
                if (reg.test(this.password.phone)) {
                    //手机号对的时候操作
                    this.phone = false
                    console.log('duile')
                } else {
                    console.log('cuole')
                    this.phone = true
                }
                if (!this.password.code) {//验证码
                    this.code = true
                }
            }
        }
    }
</script>

<style scoped>
    .code{
        display: flex;
    }
    span{
        color: red;
        font-size: 12px;
        padding:  10px 60px;
    }
    .style{
        color: #333333;
        width: 100%;
        border-bottom:1px solid #F6F6F6;
    }
    .button{
        width: 99%;
        margin-top: 50px;
    }
</style>
